<!-- 2020 Sora https://www.sorasky.in/ -->

<template>
  <div id="login_window" class="login_window">
    <div class="container">
      <div class="content">
        <h2 class="text-center" style="padding-top: 50px;">心理问题筛查管理平台</h2>
        <hr />
        <h4 class="text-center">欢迎登录</h4>
        <hr style="background-color: black; width: 100px;" />
        <p class="alert alert-success" v-show="show_reg_success">注册成功！请在下方登录：</p>
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-user-circle-o"/></span>
            </div>
              <input type="text" class="form-control" placeholder="请输入用户名" v-model="username"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-key"/></span>
            </div>
              <input type="password" class="form-control" placeholder="请输入密码" v-model="password"/>
          </div>
          <div class="input-group mb-4" v-show="false">
            <div class="input-group-prepend">
              <span class="input-group-text">验证码：</span>
            </div>
              <input type="text" class="form-control" placeholder="请输入验证码" v-model="captcha"/>
            <div class="input-group-append">
              <span class="input-group-text">H4HG</span>
            </div>
          </div>
          <input type="button" class="btn btn-primary btn-block" value="登录" @click="login" />
        </form>
        <div class="text-center m-4">
          <p>没有账号？去<router-link to="register">注册</router-link> | <a href="#">找回密码</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../assets/css/login.css'
import $ from 'jquery'
import element from 'element-ui'
export default {
  name: 'Login',
  components: {

  },
  methods: {
    login(){
      $.ajax({
        contentType: 'application/json',
        type: 'POST',
        url: '/login',
        dataType: 'json',
        data: JSON.stringify({
          'account': this.username,
          'userpassword': this.password
        }),
        success: res => {
          if(res.flag){
            element.Message({
              message: '登录成功，正在跳转',
              type: 'success'
            })
            this.$router.push('/home/' + this.username)
          }else{
            element.Message({
              message: '密码错误，请检查密码是否正确',
              type: 'error'
            })
          }
        },
        error: res => {
          element.Message({
            message: '内部错误，请联系管理员',
            type: 'error'
          })
        }
      })
    },
  },
  data(){
    return {
      username: '',
      password: '',
      captcha: '',
      show_reg_success: false,
      error_message: ''
    }
  },
  mounted() {
    let query_string = window.location.search.substring(1)
    if(query_string === 'reg_success'){
      this.show_reg_success = true
    }
  }
}
</script>

<style>
</style>
